<?php
// 初始化Session（必须放在页面最顶部）
session_start();
$userName = $_SESSION['user_name'] ?? ''; // 从Session读取用户名
$isLogin = !empty($userName); // 判断是否登录
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FitPeak - 健身饮食首页</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
<!-- 替换后的完整代码，保留 rel 属性 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#FF7D00',
            fitness: '#FF6B6B', // 健身动作主题色
            nutrition: '#36D399', // 饮食搭配主题色
            community: '#9333EA', // 用户社区主题色
            profile: '#06B6D4' // 个人中心主题色
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .card-hover {
        @apply hover:shadow-xl hover:-translate-y-1 transition-custom;
      }
    }
  </style>
  <style>
    /* 全局样式 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      scroll-behavior: smooth;
    }
    
    /* 动画效果 */
    .slide-in {
      animation: slideIn 0.5s ease forwards;
    }
    
    @keyframes slideIn {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    .fade-in {
      animation: fadeIn 0.5s ease forwards;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    /* 背景图案 */
    .bg-pattern {
      background-image: radial-gradient(#165DFF10 1px, transparent 1px);
      background-size: 20px 20px;
    }
    
    /* 导航栏滚动效果 */
    .nav-scrolled {
      @apply bg-white shadow-md;
    }
  </style>
</head>
<body class="bg-gray-50 text-dark">
  <!-- 导航栏（固定顶部） -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-custom bg-white shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo：跳转链接改为新首页名 home.php -->
      <a href="home.php" class="flex items-center">
        <div class="text-2xl font-bold text-primary">FitPeak</div>
      </a>
      
      <!-- 桌面端导航：内部模块锚点前缀改为 home.php -->
      <nav class="flex items-center space-x-8">
        <a href="home.php#fitness" class="font-medium text-dark hover:text-fitness transition-custom flex items-center">
          <i class="fa fa-dumbbell mr-1"></i> 健身动作
        </a>
        <a href="home.php#nutrition" class="font-medium text-dark hover:text-nutrition transition-custom flex items-center">
          <i class="fa fa-utensils mr-1"></i> 饮食搭配
        </a>
        <a href="home.php#community" class="font-medium text-dark hover:text-community transition-custom flex items-center">
          <i class="fa fa-users mr-1"></i> 用户社区
        </a>
        <a href="profile.html" class="font-medium text-dark hover:text-profile transition-custom flex items-center">
          <i class="fa fa-user-circle mr-1"></i> 个人中心
        </a>
      </nav>
      
      <!-- 动态用户操作区域（登录/注册/用户名/退出） -->
      <div class="flex items-center space-x-4">
        <?php if ($isLogin): ?>
          <!-- 已登录状态：显示用户名 + 退出按钮 -->
          <span class="text-sm font-medium text-gray-800">欢迎，<?php echo htmlspecialchars($userName); ?></span>
          <a href="profile.html" class="text-sm font-medium text-primary hover:underline transition-custom flex items-center">
            <i class="fa fa-user-circle mr-1"></i> 个人中心
          </a>
          <a href="logout.php" class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50 transition-custom">
            退出
          </a>
        <?php else: ?>
          <!-- 未登录状态：显示登录/注册按钮（跳转登录页不变） -->
          <a href="index.html" class="text-sm font-medium hover:text-primary transition-custom">登录</a>
          <a href="index.html" class="px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-custom">注册</a>
        <?php endif; ?>
      </div>
    </div>
  </header>

  <!-- 英雄区（首屏banner） -->
  <section class="pt-24 pb-16 pt-32 pb-24 bg-gradient-to-b from-primary/5 to-white relative overflow-hidden">
    <div class="absolute inset-0 bg-pattern opacity-20"></div>
    <div class="container mx-auto px-4 relative z-10">
      <div class="flex flex-row items-center">
        <!-- 文字区域 -->
        <div class="w-1/2 mb-0 slide-in" style="animation-delay: 0.1s">
          <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-4">
            健身动作 + 饮食搭配
            <br>科学塑造理想身材
          </h1>
          <p class="text-gray-600 text-lg mb-8 max-w-lg">
            专业健身动作指导 + 营养饮食方案，从新手到进阶，全程陪伴你的健身之旅
          </p>
          <div class="flex flex-row space-y-0 space-x-4">
            <!-- 热量计算器链接：指向 calorie-calculator.php（需确保该文件存在） -->
            <a href="calorie-calculator.php" class="px-6 py-3 bg-primary text-white rounded-lg font-medium text-center hover:bg-primary/90 transition-custom flex items-center justify-center">
              <i class="fa fa-calculator mr-2"></i> 计算热量需求
            </a>
            <!-- 健身动作锚点：前缀改为 home.php -->
            <a href="home.php#fitness" class="px-6 py-3 border border-fitness text-fitness rounded-lg font-medium text-center hover:bg-fitness/5 transition-custom flex items-center justify-center">
              <i class="fa fa-play-circle mr-2"></i> 查看健身动作
            </a>
          </div>
          <!-- 数据统计 -->
          <div class="flex flex-wrap gap-6 mt-12">
            <div class="flex items-center">
              <div class="w-12 h-12 rounded-full bg-fitness/10 flex items-center justify-center text-fitness mr-3">
                <i class="fa fa-dumbbell text-xl"></i>
              </div>
              <div>
                <div class="text-xl font-bold">200+</div>
                <div class="text-gray-500 text-sm">健身动作</div>
              </div>
            </div>
            <div class="flex items-center">
              <div class="w-12 h-12 rounded-full bg-nutrition/10 flex items-center justify-center text-nutrition mr-3">
                <i class="fa fa-utensils text-xl"></i>
              </div>
              <div>
                <div class="text-xl font-bold">150+</div>
                <div class="text-gray-500 text-sm">饮食方案</div>
              </div>
            </div>
            <div class="flex items-center">
              <div class="w-12 h-12 rounded-full bg-community/10 flex items-center justify-center text-community mr-3">
                <i class="fa fa-users text-xl"></i>
              </div>
              <div>
                <div class="text-xl font-bold">5w+</div>
                <div class="text-gray-500 text-sm">社区用户</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 图片区域 -->
        <div class="w-1/2 slide-in" style="animation-delay: 0.3s">
          <div class="relative">
            <div class="absolute -top-6 -left-6 w-full h-full bg-primary/10 rounded-xl -z-10"></div>
            <img src="https://picsum.photos/id/292/800/600" alt="健身饮食结合" class="w-full h-auto rounded-xl shadow-xl">
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 健身动作模块（锚点：home.php#fitness） -->
  <section id="fitness" class="py-16 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16 slide-in">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-fitness">专业健身动作指导</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">按部位、难度分类，附带视频教程，在家也能精准训练</p>
      </div>

      <!-- 动作分类导航 -->
      <div class="flex flex-wrap justify-center gap-3 mb-10 slide-in" style="animation-delay: 0.1s">
        <button class="px-4 py-2 bg-fitness text-white rounded-full text-sm font-medium">全部动作</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom">胸肌</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom">背部</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom">手臂</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom">腿部</button>
        <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-medium transition-custom">核心</button>
      </div>

      <!-- 动作卡片列表 -->
      <div class="grid grid-cols-3 gap-8">
        <!-- 动作1 -->
        <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover slide-in" style="animation-delay: 0.2s">
          <div class="relative">
            <img src="https://picsum.photos/id/176/600/400" alt="俯卧撑" class="w-full h-48 object-cover">
            <div class="absolute top-3 right-3 bg-fitness/90 text-white text-xs px-2 py-1 rounded">新手友好</div>
          </div>
          <div class="p-5">
            <h3 class="text-xl font-bold mb-2">标准俯卧撑</h3>
            <div class="flex items-center text-sm text-gray-500 mb-3">
              <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 胸肌</span>
              <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 3组×15次</span>
            </div>
            <p class="text-gray-600 text-sm mb-4">锻炼胸肌、三角肌前束，无需器械，适合所有阶段用户</p>
            <a href="fitness-detail.html" class="inline-flex items-center text-fitness font-medium hover:underline">
              查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
            </a>
          </div>
        </div>

        <!-- 动作2 -->
        <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover slide-in" style="animation-delay: 0.3s">
          <div class="relative">
            <img src="https://picsum.photos/id/175/600/400" alt="硬拉" class="w-full h-48 object-cover">
            <div class="absolute top-3 right-3 bg-secondary/90 text-white text-xs px-2 py-1 rounded">进阶</div>
          </div>
          <div class="p-5">
            <h3 class="text-xl font-bold mb-2">罗马尼亚硬拉</h3>
            <div class="flex items-center text-sm text-gray-500 mb-3">
              <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 背部</span>
              <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 4组×12次</span>
            </div>
            <p class="text-gray-600 text-sm mb-4">强化下背部、臀部和腿部后侧，需杠铃或哑铃辅助</p>
            <a href="fitness-detail.html" class="inline-flex items-center text-fitness font-medium hover:underline">
              查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
            </a>
          </div>
        </div>

        <!-- 动作3 -->
        <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover slide-in" style="animation-delay: 0.4s">
          <div class="relative">
            <img src="https://picsum.photos/id/116/600/400" alt="平板支撑" class="w-full h-48 object-cover">
            <div class="absolute top-3 right-3 bg-fitness/90 text-white text-xs px-2 py-1 rounded">新手友好</div>
          </div>
          <div class="p-5">
            <h3 class="text-xl font-bold mb-2">平板支撑</h3>
            <div class="flex items-center text-sm text-gray-500 mb-3">
              <span class="flex items-center mr-4"><i class="fa fa-dumbbell mr-1"></i> 核心</span>
              <span class="flex items-center"><i class="fa fa-clock-o mr-1"></i> 3组×60秒</span>
            </div>
            <p class="text-gray-600 text-sm mb-4">锻炼腹直肌、腹斜肌和核心稳定性，零器械高效训练</p>
            <a href="fitness-detail.html" class="inline-flex items-center text-fitness font-medium hover:underline">
              查看教程 <i class="fa fa-arrow-right ml-2 text-xs"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- 查看更多按钮（跳转健身动作列表页） -->
      <div class="text-center mt-12 slide-in" style="animation-delay: 0.5s">
        <a href="fitness-all.php" class="inline-flex items-center px-6 py-3 border border-fitness text-fitness rounded-lg font-medium hover:bg-fitness/5 transition-custom">
          查看全部动作 <i class="fa fa-angle-right ml-2">
          </i>
        </a>
      </div>
    </div>
  </section>

  <!-- 饮食搭配模块 -->
  <section id="nutrition" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16 slide-in">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-nutrition">科学饮食搭配方案</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">根据目标定制饮食计划，包含详细食材清单和烹饪方法</p>
      </div>

      <!-- 饮食方案列表 -->
      <div class="grid grid-cols-2 gap-8">
        <!-- 方案1 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md flex flex-row card-hover slide-in" style="animation-delay: 0.1s">
          <div class="w-2/5">
            <img src="https://picsum.photos/id/292/400/500" alt="减脂餐" class="w-full h-full object-cover">
          </div>
          <div class="w-3/5 p-6">
            <div class="inline-block px-3 py-1 bg-nutrition/10 text-nutrition text-sm font-medium rounded-full mb-3">减脂塑形</div>
            <h3 class="text-xl font-bold mb-3">7天低脂减脂餐计划</h3>
            <p class="text-gray-600 text-sm mb-4">每日1500-1800千卡，高蛋白低脂搭配，包含早餐、午餐、晚餐和加餐，轻松瘦肚子</p>
            <div class="flex flex-wrap gap-2 mb-4">
              <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">低GI碳水</span>
              <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">优质蛋白</span>
              <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">膳食纤维</span>
            </div>
            <a href="nutrition-detail.html" class="inline-flex items-center text-nutrition font-medium hover:underline">
              查看详情 <i class="fa fa-arrow-right ml-2 text-xs"></i>
            </a>
          </div>
        </div>

        <!-- 方案2 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md flex flex-row card-hover slide-in" style="animation-delay: 0.2s">
          <div class="w-2/5">
            <img src="https://picsum.photos/id/431/400/500" alt="增肌餐" class="w-full h-full object-cover">
          </div>
          <div class="w-3/5 p-6">
            <div class="inline-block px-3 py-1 bg-nutrition/10 text-nutrition text-sm font-medium rounded-full mb-3">增肌增重</div>
            <h3 class="text-xl font-bold mb-3">30天增肌餐计划</h3>
            <p class="text-gray-600 text-sm mb-4">每日2500-3000千卡，蛋白质每公斤体重2g，分5餐摄入，配合训练快速增肌</p>
            <div class="flex flex-wrap gap-2 mb-4">
              <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">高蛋白质</span>
              <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">复合碳水</span>
              <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">健康脂肪</span>
            </div>
            <a href="nutrition-detail.html" class="inline-flex items-center text-nutrition font-medium hover:underline">
              查看详情 <i class="fa fa-arrow-right ml-2 text-xs"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 用户社区模块 -->
  <section id="community" class="py-16 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16 slide-in">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-community">用户社区动态</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">分享你的健身饮食心得，一起交流进步</p>
      </div>

      <!-- 社区帖子列表 -->
      <div class="grid grid-cols-3 gap-8">
        <!-- 帖子1 -->
        <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover slide-in" style="animation-delay: 0.1s">
          <div class="p-5">
            <div class="flex items-center mb-4">
              <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-full h-full object-cover">
              </div>
              <div>
                <div class="font-medium">李同学</div>
                <div class="text-xs text-gray-500">2小时前</div>
              </div>
            </div>
            <p class="text-gray-700 mb-4">坚持健身3个月，配合低脂餐计划，终于练出腹肌了！感谢平台的指导方案，真的很有用！</p>
            <img src="https://picsum.photos/id/177/600/400" alt="健身成果" class="w-full h-48 object-cover rounded-lg mb-4">
            <div class="flex items-center justify-between text-sm">
              <div class="flex items-center space-x-4">
                <button class="flex items-center text-gray-500 hover:text-primary transition-custom">
                  <i class="fa fa-heart-o mr-1"></i> 128
                </button>
                <button class="flex items-center text-gray-500 hover:text-primary transition-custom">
                  <i class="fa fa-comment-o mr-1"></i> 32
                </button>
              </div>
              <button class="text-gray-500 hover:text-primary transition-custom">
                <i class="fa fa-share"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 帖子2 -->
        <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover slide-in" style="animation-delay: 0.2s">
          <div class="p-5">
            <div class="flex items-center mb-4">
              <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                <img src="https://picsum.photos/id/26/100/100" alt="用户头像" class="w-full h-full object-cover">
              </div>
              <div>
                <div class="font-medium">王教练</div>
                <div class="text-xs text-gray-500">昨天 18:30</div>
              </div>
            </div>
            <p class="text-gray-700 mb-4">新手常见的5个饮食误区：1. 完全不吃碳水 2. 只吃水煮菜 3. 忽略蛋白质摄入... 正确的饮食方案应该是这样的→</p>
            <div class="bg-gray-100 p-4 rounded-lg mb-4">
              <ul class="text-sm text-gray-600 space-y-2">
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-nutrition mt-1 mr-2"></i>
                  <span>碳水化合物应占每日热量的40-50%</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check-circle text-nutrition mt-1 mr-2"></i>
                  <span>每日蛋白质摄入建议：1.2-2.0g/kg体重</span>
                </li>
              </ul>
            </div>
            <div class="flex items-center justify-between text-sm">
              <div class="flex items-center space-x-4">
                <button class="flex items-center text-gray-500 hover:text-primary transition-custom">
                  <i class="fa fa-heart-o mr-1"></i> 256
                </button>
                <button class="flex items-center text-gray-500 hover:text-primary transition-custom">
                  <i class="fa fa-comment-o mr-1"></i> 64
                </button>
              </div>
              <button class="text-gray-500 hover:text-primary transition-custom">
                <i class="fa fa-share-alt"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 帖子3 -->
        <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover slide-in" style="animation-delay: 0.3s">
          <div class="p-5">
            <div class="flex items-center mb-4">
              <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-full h-full object-cover">
              </div>
              <div>
                <div class="font-medium">张同学</div>
                <div class="text-xs text-gray-500">3天前</div>
              </div>
            </div>
            <p class="text-gray-700 mb-4">分享我的增肌餐做法，简单易做又美味！成本不高，适合学生党和上班族→</p>
            <img src="https://picsum.photos/id/488/600/400" alt="增肌餐" class="w-full h-48 object-cover rounded-lg mb-4">
            <div class="flex items-center justify-between text-sm">
              <div class="flex items-center space-x-4">
                <button class="flex items-center text-gray-500 hover:text-primary transition-custom">
                  <i class="fa fa-heart-o mr-1"></i> 189
                </button>
                <button class="flex items-center text-gray-500 hover:text-primary transition-custom">
                  <i class="fa fa-comment-o mr-1"></i> 47
                </button>
              </div>
              <button class="text-gray-500 hover:text-primary transition-custom">
                <i class="fa fa-share-alt"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 查看更多按钮 -->
      <div class="text-center mt-12 slide-in" style="animation-delay: 0.4s">
        <a href="community-all.html" class="inline-flex items-center px-6 py-3 border border-community text-community rounded-lg font-medium hover:bg-community/5 transition-custom">
          查看更多动态 <i class="fa fa-angle-right ml-2"></i>
        </a>
      </div>
    </div>
  </section>

  <!-- 底部区域 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-4 gap-8">
        <div>
          <div class="text-2xl font-bold mb-4">FitPeak</div>
          <p class="text-gray-400 text-sm">专业的健身饮食平台，助力你的健康生活</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-400 hover:text-white transition-custom"><i class="fa fa-weibo"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-custom"><i class="fa fa-weixin"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-custom"><i class="fa fa-instagram"></i></a>
          </div>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">快速链接</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li><a href="#" class="hover:text-white transition-custom">关于我们</a></li>
            <li><a href="#" class="hover:text-white transition-custom">健身指南</a></li>
            <li><a href="#" class="hover:text-white transition-custom">饮食知识</a></li>
            <li><a href="#" class="hover:text-white transition-custom">常见问题</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">功能模块</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li><a href="fitness-all.php" class="hover:text-white transition-custom">健身动作</a></li>
            <li><a href="#nutrition" class="hover:text-white transition-custom">饮食搭配</a></li>
            <li><a href="#community" class="hover:text-white transition-custom">用户社区</a></li>
            <li><a href="calorie-calculator.html" class="hover:text-white transition-custom">热量计算</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">联系我们</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> contact@fitpeak.com</li>
            <li class="flex items-center"><i class="fa fa-phone mr-2"></i> 400-123-4567</li>
            <li class="flex items-center"><i class="fa fa-map-marker mr-2"></i> 北京市朝阳区健身大厦</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-500">
        &copy; 2023 FitPeak 健身饮食平台 版权所有
      </div>
    </div>
  </footer>

  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', () => {
      const navbar = document.getElementById('navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('nav-scrolled');
      } else {
        navbar.classList.remove('nav-scrolled');
      }
    });
  </script>
</body>
</html>